<template>
	<view class="main">
		<u-navbar title="城市" :autoBack="true">
		</u-navbar>
		<my-search :isSelectCity="false"></my-search>
		<view class="content">
			<scroll-view scroll-y="true" style="padding-bottom: 100rpx;">
				<view class="city">
					<view class="city_item" v-for="v in allCity" :class="{'city_active' : currentCity.id == v.id }"
						@click="selectCity(v)">
						{{v.name}}
					</view>
				</view>
			</scroll-view>
			<view class="zone">
				<view class="currentCity" v-if="currentCity">{{currentCity.name}}</view>
				<view class="zone_item">
					<view class="zone_item_box" v-for="v in zone" :class="{'zone_active' : v.id == currentZone.id }"
						@click="selectZone(v)">
						{{v.name}}
						<!-- <u-button :plain="true" color="#4581F6" size="small" shape="circle">{{v}}</u-button> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from "vuex";
	import {
		searchCity
	} from '@/api/home/search.js'
	export default {
		provide() {
			return {
				scroll: this, //必须这样传才是响应式
			}
		},
		data() {
			return {
				scrollLength: 0,
				city: [],
				zone: [],
				currentCity: {},
				currentZone: {},
				allCity: [],
			}
		},
		computed: {
			...mapState({
				resultToCity: state => state.doc.resultToCity,
			}),
		},
		methods: {
			...mapMutations(['ADDHIS', 'NODATA']),
			selectCity(city) {
				if (city.name == '全部') {
					let store = this.$store.state.doc.navCity
					store.id = ''
					store.name = '全部'
					this.$store.state.doc.zone = ''
					this.ADDHIS()
					// uni.navigateTo({
					// 	url: '/pages/sousuo/search_hosp/index'
					// });
					uni.navigateBack({
						delta: 1
					});
					return
				}
				//console.log(city);

				this.currentCity = city
				let store = this.$store.state.doc.navCity
				store.id = city.id
				store.name = city.name
				if (this.resultToCity) {
					this.NODATA()
				} else {
					this.ADDHIS()
				}
				//console.log(this.resultToCity);
			},
			selectZone(zone) {
				// console.log(zone);
				// return
				this.currentZone = zone
				//this.$store.state.doc.topSearchButton = 1 //暂时这么写
				this.$store.state.doc.zone = zone
				//console.log(this.$store.state.doc.zone);
				//console.log(zone);
				//uni.navigateTo({
				//url: `/pages/sousuo/search_hosp/index`
				//url: `/pages/index/index`
				//});
				if (this.resultToCity) {
					this.NODATA()
				} else {
					this.ADDHIS()
				}
				uni.navigateBack({
					delta: 1
				});
			},
			async getCity() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await searchCity()
				uni.hideLoading()
				this.allCity = res.data
				this.allCity.unshift({
					id: '',
					name: '全部',
					countyList: []
				})
			}
		},
		watch: {
			// currentCity: {
			// 	handler: function(current, old) {
			// 		this.zone = current.countyList
			// 		this.currentZone = this.zone[0]
			// 	},
			// 	deep: true,
			// 	immediate:true,
			// }
			currentCity(current, old) {
				if (current.countyList !== undefined) {
					this.zone = current.countyList
					this.currentZone = this.zone[0]
				}
			}
		},

		async onShow() {
			// if (my.canIUse('hideBackHome')) {
			// 	my.hideBackHome();
			// }
			// uni.setNavigationBar({
			// 	title: '切换城市',
			// })
			await this.getCity()
			this.allCity.map((v) => {
				if (this.$store.state.doc.navCity.id == v.id) {
					this.zone = v.countyList //首次进入把zone	的列表渲染了
				}
			});
			//console.log(this.$store.state.doc.zone,'3ghghf');
			this.currentZone = this.$store.state.doc.zone //高亮区域
			this.currentCity = this.$store.state.doc.navCity //高亮所选城市
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替,滚动距离
			this.scrollLength = e.scrollTop
			//console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 180rpx;
		.content {
			display: flex;
			//padding-top: 180rpx;

			// height: 1000rpx;
			.city {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				height: 900rpx;
				width: 266rpx;
				background: #FFFFFF;

				//padding-bottom: 200rpx;
				.city_item {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 72rpx;
					width: 266rpx;
					padding: 30rpx 0 0 72rpx;
				}

				.city_active {
					color: #4581F6;
				}
			}

			.zone {
				width: 1400rpx;
				//height: 900rpx;
				background: #F5F6F8;
				padding: 30rpx 0 0 40rpx;


				.currentCity {
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
					line-height: 40rpx;
				}

				.zone_item {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.zone_item_box {
						font-size: 28rpx;
						font-weight: 400;
						color: #3D3D3D;
						background: #FFFFFF;
						text-align: center;
						border-radius: 46rpx;
						line-height: 40rpx;
						padding: 10rpx 12rpx;
						margin-right: 50rpx;
						margin-top: 20rpx;
						flex: 0 0 33%;
					}

					.zone_active {
						background: #4581F6;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>